
<script setup lang="ts">

const { list } = defineProps<{
    list: {
        limitDesc: string,
        expiryInfo: string,
        highlightCouponDesc?: {
            content: string,
            highlightTexts: Array<string>
        },
        effect: string | number,
        promotionId: string
    }
}>()



</script>

<template>
    <div class="coupon-comp mt-2 flex flex-col ">

        <div class=" w-full flex justify-between">
            <div class="coupom-left relative w-2/3 p-2 rounded-xl" style="background-color: #ffedec;">
                <div class="plat-leftTag absolute left-0 top-0  text-white text-xs px-1.5 " style="background: #f46; border-radius: 5px 0 5px;">
                    店铺券
                </div>
                <div class="totle mt-3">
                    <b>￥</b> <span class=" text-2xl font-bold">{{ list.effect }}</span> <span>{{ list.limitDesc }}</span>
                </div>

                <div class="effective-time text-gray-500">
                    {{ list.expiryInfo }}
                </div>
            </div>

            <div class="coupom-rigth flex items-center justify-center w-1/3 px-2 py-4 rounded-xl"
                style="background-color: #ffedec;">

                <span class=" rounded-full py-2 px-4 text-white" style="background-color: #ff457b;">立即领取</span>

            </div>
        </div>

        <div v-show=" list.highlightCouponDesc" class="tip w-full py-1 my-2 text-black rounded-full bg-gray-100">

            {{ list.highlightCouponDesc?.content }}

        </div>

    </div>
</template>


<style lang="scss" scoped>
.coupon-comp {
    .coupom-left {
        position: relative;

        &::after {
            position: absolute;
            right: 0;
            top: 10%;
            display: block;
            content: '';
            height: 80%;
            border-left: 1px dashed brown;
            padding: 10px 0;
        }
    }
}
</style>